<template>
  <cs-card>
    <div class="formTitle_G">
      <span>修改广告</span>
      <div>
        <cs-btn btnText="取消" type="search" />
        <cs-btn btnText="保存" type="primary" />
      </div>
    </div>
    <div class="formContent_G">
      <el-form label-width="70px" class="form_G">
        <el-form-item label="广 告 主">
          <el-input placeholder="必填，请填写广告主"></el-input>
        </el-form-item>
        <el-form-item label="广告名称">
          <el-input placeholder="必填，请填写广告名称"></el-input>
        </el-form-item>
        <el-form-item label="投放小区">
          <cs-tag type="plainPrimary">紫薇英伦小镇</cs-tag>
          <cs-tag type="plainPrimary">银城绿洲</cs-tag>
          <cs-btn btnText="添加投放小区" type="primary" />
        </el-form-item>
        <el-form-item label="投放类型">
          <el-radio v-model="launchType" label="1" class="formRadio_G"
            >banner轮播投放</el-radio
          >
          <el-radio v-model="launchType" label="2" class="formRadio_G"
            >图文文章投放</el-radio
          >
          <el-radio v-model="launchType" label="3" class="formRadio_G"
            >弹窗广告投放</el-radio
          >
        </el-form-item>
        <el-form-item label="投放时间">
          <el-date-picker
            v-model="time"
            type="datetimerange"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item
          label="投放位置"
          v-show="launchType === '2'"
          class="positionFormItem"
        >
          <el-radio v-model="imgPosition" label="1" class="formRadio_G"
            >置顶</el-radio
          >
          <el-radio v-model="imgPosition" label="2" class="formRadio_G"
            >按时间排序</el-radio
          >
        </el-form-item>
        <el-form-item
          label="图片位置"
          v-show="launchType === '1'"
          class="positionFormItem"
        >
          <el-radio v-model="imgPosition" label="1" class="formRadio_G"
            >第一张</el-radio
          >
          <el-radio v-model="imgPosition" label="2" class="formRadio_G"
            >第二张</el-radio
          >
          <el-radio v-model="imgPosition" label="3" class="formRadio_G"
            >第三张</el-radio
          >
          <el-radio v-model="imgPosition" label="4" class="formRadio_G"
            >第四张</el-radio
          >
        </el-form-item>
        <el-form-item label="时 间 段">
          <div class="timeSlotRadioBox">
            <el-radio-group v-model="timeSlotValue">
              <el-radio
                v-for="(item, index) in timeSlot"
                :key="index"
                :label="index"
                class="formRadio_G"
                >{{ item }}</el-radio
              >
            </el-radio-group>
          </div>
        </el-form-item>
        <el-form-item
          :label="launchType === '3' ? '上传图片' : '上传封面'"
          class="formUploadCover_G"
        >
          <el-upload
            class="avatar-uploader_G"
            action="https://jsonplaceholder.typicode.com/posts/"
            list-type="picture-card"
            :limit="1"
            :file-list="uploadImgList"
            :on-progress="handleImgUploadProgress"
            :on-success="handleImgSuccess"
            :on-error="handleImgError"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleUploadImgRemove"
            :class="imageUrl ? 'uploadImg' : ''"
          >
            <i class="el-icon-plus"></i>
            <span class="addPhoto_G" v-show="isShowUploadTip">添加照片</span>
          </el-upload>
          <div class="uploadCoverTipBox_G">
            <div class="uploadCoverTip_G">
              <span>*</span>
              <span>建议banner图封面尺寸674*276px</span>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="图片缩放" v-show="launchType === '3'">
          <el-radio v-model="imgPosition" label="1" class="formRadio_G"
            >等比例</el-radio
          >
          <el-radio v-model="imgPosition" label="2" class="formRadio_G"
            >拉伸</el-radio
          >
          <el-radio v-model="imgPosition" label="3" class="formRadio_G"
            >填充</el-radio
          >
          <el-radio v-model="imgPosition" label="4" class="formRadio_G"
            >不平铺</el-radio
          >
        </el-form-item>
        <el-form-item label="广告内容">
          <div v-show="launchType !== '2'">
            <el-radio v-model="adContent" label="1" class="formRadio_G"
              >无</el-radio
            >
            <el-radio v-model="adContent" label="2" class="formRadio_G"
              >链接</el-radio
            >
            <el-radio v-model="adContent" label="3" class="formRadio_G"
              >图文</el-radio
            >
          </div>
          <div
            id="richTextEditorBox"
            v-show="launchType === '2' || adContent === '3'"
          ></div>
        </el-form-item>
        <el-form-item v-show="adContent === '2' && launchType !== '2'">
          <el-input placeholder="必填，请输入链接"></el-input>
        </el-form-item>
        <el-form-item v-show="launchType === '3'" label="弹出规则">
          <el-select
            v-model="ejectRuleValue"
            placeholder="请选择"
            clearable
            class="ejectRuleSelect"
          >
            <el-option label="每天首次进入小程序弹出一次" value="1">
            </el-option>
          </el-select>
          <el-radio
            v-model="isEject"
            :label="true"
            v-show="launchType === '3'"
            @click.native.prevent="ejectRadioClick"
            class="formRadio_G"
          >
            用户点击后不在弹出
          </el-radio>
        </el-form-item>
      </el-form>
    </div>
  </cs-card>
</template>

<script>
import CsCard from "@/components/CsCard/CsCard.vue";
import CsBtn from "@/components/CsBtn/CsBtn.vue";
import CsTag from "@/components/CsTag/CsTag.vue";

import E from "wangeditor";

export default {
  name: "adAdvertise",
  components: {
    CsCard,
    CsBtn,
    CsTag,
  },
  data() {
    return {
      launchType: "",
      time: "",
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      imgPosition: "",
      timeSlot: [
        "全选",
        "00:00-01:00",
        "02:00-03:00",
        "03:00-04:00",
        "04:00-05:00",
        "05:00-06:00",
        "06:00-07:00",
        "07:00-08:00",
        "08:00-09:00",
        "09:00-10:00",
        "10:00-11:00",
        "11:00-12:00",
        "12:00-13:00",
        "13:00-14:00",
        "14:00-15:00",
        "15:00-16:00",
        "16:00-17:00",
        "17:00-18:00",
        "18:00-19:00",
        "19:00-20:00",
        "20:00-21:00",
        "21:00-22:00",
        "22:00-23:00",
        "23:00-24:00",
      ],
      timeSlotValue: "",
      uploadImgList: [],
      imageUrl: "",
      isShowUploadTip: true,
      adContent: "",
      ejectRuleValue: "",
      isEject: "",
    };
  },
  mounted() {
    this.createWebRichTextEditor();
  },
  methods: {
    handleImgUploadProgress(event, file, fileList) {
      this.imageUrl = URL.createObjectURL(file.raw);
      this.isShowUploadTip = false;
    },
    handleImgSuccess(response, file, fileList) {},
    handleImgError(err, file, fileList) {
      this.imageUrl = "";
      this.isShowUploadTip = true;
      this.$message.error("图片上传失败");
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleUploadImgRemove() {
      this.imageUrl = "";
      this.isShowUploadTip = true;
    },
    // 单选按钮改为复选按钮
    ejectRadioClick() {
      if (this.isEject) {
        this.isEject = "";
        return;
      }
      this.isEject = true;
    },
    createWebRichTextEditor() {
      const editor = new E("#richTextEditorBox");
      // 设置编辑器高度
      editor.config.height = 148;
      editor.config.placeholder = "必填，请输入公告内容";
      editor.config.zIndex = 200;
      // 取消自动 focus
      editor.config.focus = false;
      editor.create();
    },
  },
};
</script>

<style lang="scss" scoped>
.cs-card {
  margin: 26px;
}
.form_G {
  .positionFormItem {
    margin-bottom: 10px;
  }

  .ejectRuleSelect {
    width: 100%;
  }

  .uploadImg {
    ::v-deep .el-upload--picture-card {
      display: none;
    }
  }
}

.timeSlotRadioBox {
  width: 780px;

  .formRadio_G {
    margin-top: 16px;
  }
}
</style>
